<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jquery网格插件 - Bootstrap后台管理系统模版Ace下载</title>
    <meta name="keywords" content="Bootstrap模版,Bootstrap模版下载,Bootstrap教程,Bootstrap中文" />
    <meta name="description" content="站长素材提供Bootstrap模版,Bootstrap教程,Bootstrap中文翻译等相关Bootstrap插件下载" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- basic styles -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
    <!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->
    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="assets/css/jquery-ui-1.10.3.full.min.css" />
    <link rel="stylesheet" href="assets/css/datepicker.css" />
    <link rel="stylesheet" href="assets/css/ui.jqgrid.css" />
    <!-- fonts -->
    <!--<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />-->
    <!-- ace styles -->
    <link rel="stylesheet" href="assets/css/ace.min.css" />
    <link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="assets/css/ace-skins.min.css" />
    <!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->
    <!-- inline styles related to this page -->
    <!-- ace settings handler -->
    <script src="assets/js/ace-extra.min.js"></script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
		<script src="assets/js/html5shiv.js"></script>
		<script src="assets/js/respond.min.js"></script>
		<![endif]-->
</head>
<body>
    <div class="navbar navbar-default" id="navbar">
        <script type="text/javascript">
            try { ace.settings.check('navbar', 'fixed') } catch (e) { }
        </script>
        <div class="navbar-container" id="navbar-container">
            <div class="navbar-header pull-left">
                <a href="#" class="navbar-brand"><small><i class="icon-leaf"></i>Ace Admin </small>
                </a>
                <!-- /.brand -->
            </div>
            <!-- /.navbar-header -->
            <div class="navbar-header pull-right" role="navigation">
                <ul class="nav ace-nav">
                    <li class="grey"><a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="icon-tasks">
                    </i><span class="badge badge-grey">4</span> </a>
                        <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
                            <li class="dropdown-header"><i class="icon-ok"></i>4 Tasks to complete </li>
                            <li><a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">Software Update</span> <span class="pull-right">65%</span>
                                </div>
                                <div class="progress progress-mini ">
                                    <div style="width: 65%" class="progress-bar ">
                                    </div>
                                </div>
                            </a></li>
                            <li><a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">Hardware Upgrade</span> <span class="pull-right">35%</span>
                                </div>
                                <div class="progress progress-mini ">
                                    <div style="width: 35%" class="progress-bar progress-bar-danger">
                                    </div>
                                </div>
                            </a></li>
                            <li><a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">Unit Testing</span> <span class="pull-right">15%</span>
                                </div>
                                <div class="progress progress-mini ">
                                    <div style="width: 15%" class="progress-bar progress-bar-warning">
                                    </div>
                                </div>
                            </a></li>
                            <li><a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">Bug Fixes</span> <span class="pull-right">90%</span>
                                </div>
                                <div class="progress progress-mini progress-striped active">
                                    <div style="width: 90%" class="progress-bar progress-bar-success">
                                    </div>
                                </div>
                            </a></li>
                            <li><a href="#">See tasks with details <i class="icon-arrow-right"></i></a></li>
                        </ul>
                    </li>
                    <li class="purple"><a data-toggle="dropdown" class="dropdown-toggle" href="#"><i
                        class="icon-bell-alt icon-animated-bell"></i><span class="badge badge-important">8</span>
                    </a>
                        <ul class="pull-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
                            <li class="dropdown-header"><i class="icon-warning-sign"></i>8 Notifications </li>
                            <li><a href="#">
                                <div class="clearfix">
                                    <span class="pull-left"><i class="btn btn-xs no-hover btn-pink icon-comment"></i>New
                                        Comments </span><span class="pull-right badge badge-info">+12</span>
                                </div>
                            </a></li>
                            <li><a href="#"><i class="btn btn-xs btn-primary icon-user"></i>Bob just signed up as
                                an editor ... </a></li>
                            <li><a href="#">
                                <div class="clearfix">
                                    <span class="pull-left"><i class="btn btn-xs no-hover btn-success icon-shopping-cart">
                                    </i>New Orders </span><span class="pull-right badge badge-success">+8</span>
                                </div>
                            </a></li>
                            <li><a href="#">
                                <div class="clearfix">
                                    <span class="pull-left"><i class="btn btn-xs no-hover btn-info icon-twitter"></i>Followers
                                    </span><span class="pull-right badge badge-info">+11</span>
                                </div>
                            </a></li>
                            <li><a href="#">See all notifications <i class="icon-arrow-right"></i></a></li>
                        </ul>
                    </li>
                    <li class="green"><a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="icon-envelope icon-animated-vertical">
                    </i><span class="badge badge-success">5</span> </a>
                        <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
                            <li class="dropdown-header"><i class="icon-envelope-alt"></i>5 Messages </li>
                            <li><a href="#">
                                <img src="assets/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" />
                                <span class="msg-body"><span class="msg-title"><span class="blue">Alex:</span> Ciao
                                    sociis natoque penatibus et auctor ... </span><span class="msg-time"><i class="icon-time">
                                    </i><span>a moment ago</span> </span></span></a></li>
                            <li><a href="#">
                                <img src="assets/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" />
                                <span class="msg-body"><span class="msg-title"><span class="blue">Susan:</span> Vestibulum
                                    id ligula porta felis euismod ... </span><span class="msg-time"><i class="icon-time">
                                    </i><span>20 minutes ago</span> </span></span></a></li>
                            <li><a href="#">
                                <img src="assets/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" />
                                <span class="msg-body"><span class="msg-title"><span class="blue">Bob:</span> Nullam
                                    quis risus eget urna mollis ornare ... </span><span class="msg-time"><i class="icon-time">
                                    </i><span>3:15 pm</span> </span></span></a></li>
                            <li><a href="inbox.html">See all messages <i class="icon-arrow-right"></i></a></li>
                        </ul>
                    </li>
                    <li class="light-blue"><a data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <img class="nav-user-photo" src="assets/avatars/user.jpg" alt="Jason's Photo" />
                        <span class="user-info"><small>Welcome,</small> Jason </span><i class="icon-caret-down">
                        </i></a>
                        <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                            <li><a href="#"><i class="icon-cog"></i>Settings </a></li>
                            <li><a href="#"><i class="icon-user"></i>Profile </a></li>
                            <li class="divider"></li>
                            <li><a href="#"><i class="icon-off"></i>Logout </a></li>
                        </ul>
                    </li>
                </ul>
                <!-- /.ace-nav -->
            </div>
            <!-- /.navbar-header -->
        </div>
        <!-- /.container -->
    </div>
    <div class="main-container" id="main-container">
        <script type="text/javascript">
            try { ace.settings.check('main-container', 'fixed') } catch (e) { }
        </script>
        <div class="main-container-inner">
            <a class="menu-toggler" id="menu-toggler" href="#"><span class="menu-text"></span>
            </a>
            <div class="sidebar" id="sidebar">
                <script type="text/javascript">
                    try { ace.settings.check('sidebar', 'fixed') } catch (e) { }
                </script>
                <div class="sidebar-shortcuts" id="sidebar-shortcuts">
                    <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
                        <button class="btn btn-success">
                            <i class="icon-signal"></i>
                        </button>
                        <button class="btn btn-info">
                            <i class="icon-pencil"></i>
                        </button>
                        <button class="btn btn-warning">
                            <i class="icon-group"></i>
                        </button>
                        <button class="btn btn-danger">
                            <i class="icon-cogs"></i>
                        </button>
                    </div>
                    <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
                        <span class="btn btn-success"></span><span class="btn btn-info"></span><span class="btn btn-warning">
                        </span><span class="btn btn-danger"></span>
                    </div>
                </div>
                <!-- #sidebar-shortcuts -->
                <ul class="nav nav-list">
                    <li class="active"><a href="index.html"><i class="icon-dashboard"></i><span class="menu-text">
                        控制台 </span></a></li>
                    <li><a href="typography.html"><i class="icon-text-width"></i><span class="menu-text">
                        文字排版 </span></a></li>
                    <li><a href="#" class="dropdown-toggle"><i class="icon-desktop"></i><span class="menu-text">
                        UI 组件 </span><b class="arrow icon-angle-down"></b></a>
                        <ul class="submenu">
                            <li><a href="elements.html"><i class="icon-double-angle-right"></i>组件 </a></li>
                            <li><a href="buttons.html"><i class="icon-double-angle-right"></i>按钮 &amp; 图表 </a>
                            </li>
                            <li><a href="treeview.html"><i class="icon-double-angle-right"></i>树菜单 </a></li>
                            <li><a href="jquery-ui.html"><i class="icon-double-angle-right"></i>jQuery UI </a>
                            </li>
                            <li><a href="nestable-list.html"><i class="icon-double-angle-right"></i>可拖拽列表 </a>
                            </li>
                            <li><a href="#" class="dropdown-toggle"><i class="icon-double-angle-right"></i>三级菜单
                                <b class="arrow icon-angle-down"></b></a>
                                <ul class="submenu">
                                    <li><a href="#"><i class="icon-leaf"></i>第一级 </a></li>
                                    <li><a href="#" class="dropdown-toggle"><i class="icon-pencil"></i>第四级 <b class="arrow icon-angle-down">
                                    </b></a>
                                        <ul class="submenu">
                                            <li><a href="#"><i class="icon-plus"></i>添加产品 </a></li>
                                            <li><a href="#"><i class="icon-eye-open"></i>查看商品 </a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="active open"><a href="#" class="dropdown-toggle"><i class="icon-list"></i>
                        <span class="menu-text">表格 </span><b class="arrow icon-angle-down"></b></a>
                        <ul class="submenu">
                            <li><a href="tables.html"><i class="icon-double-angle-right"></i>简单 &amp; 动态 </a>
                            </li>
                            <li class="active"><a href="jqgrid.html"><i class="icon-double-angle-right"></i>jqGrid
                                plugin </a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="dropdown-toggle"><i class="icon-edit"></i><span class="menu-text">
                        表单 </span><b class="arrow icon-angle-down"></b></a>
                        <ul class="submenu">
                            <li><a href="form-elements.html"><i class="icon-double-angle-right"></i>表单组件 </a>
                            </li>
                            <li><a href="form-wizard.html"><i class="icon-double-angle-right"></i>向导提示 &amp; 验证
                            </a></li>
                            <li><a href="wysiwyg.html"><i class="icon-double-angle-right"></i>编辑器 </a></li>
                            <li><a href="dropzone.html"><i class="icon-double-angle-right"></i>文件上传 </a></li>
                        </ul>
                    </li>
                    <li><a href="widgets.html"><i class="icon-list-alt"></i><span class="menu-text">插件 </span>
                    </a></li>
                    <li><a href="calendar.html"><i class="icon-calendar"></i><span class="menu-text">日历
                        <span class="badge badge-transparent tooltip-error" title="2&nbsp;Important&nbsp;Events">
                            <i class="icon-warning-sign red bigger-130"></i></span></span></a></li>
                    <li><a href="gallery.html"><i class="icon-picture"></i><span class="menu-text">相册 </span>
                    </a></li>
                    <li><a href="#" class="dropdown-toggle"><i class="icon-tag"></i><span class="menu-text">
                        更多页面 </span><b class="arrow icon-angle-down"></b></a>
                        <ul class="submenu">
                            <li><a href="profile.html"><i class="icon-double-angle-right"></i>用户信息 </a></li>
                            <li><a href="inbox.html"><i class="icon-double-angle-right"></i>收件箱 </a></li>
                            <li><a href="pricing.html"><i class="icon-double-angle-right"></i>售价单 </a></li>
                            <li><a href="invoice.html"><i class="icon-double-angle-right"></i>购物车 </a></li>
                            <li><a href="timeline.html"><i class="icon-double-angle-right"></i>时间轴 </a></li>
                            <li><a href="login.html"><i class="icon-double-angle-right"></i>登录 &amp; 注册 </a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#" class="dropdown-toggle"><i class="icon-file-alt"></i><span class="menu-text">
                        其他页面 <span class="badge badge-primary ">5</span> </span><b class="arrow icon-angle-down">
                        </b></a>
                        <ul class="submenu">
                            <li><a href="faq.html"><i class="icon-double-angle-right"></i>帮助 </a></li>
                            <li><a href="error-404.html"><i class="icon-double-angle-right"></i>404错误页面 </a>
                            </li>
                            <li><a href="error-500.html"><i class="icon-double-angle-right"></i>500错误页面 </a>
                            </li>
                            <li><a href="grid.html"><i class="icon-double-angle-right"></i>网格 </a></li>
                            <li><a href="blank.html"><i class="icon-double-angle-right"></i>空白页面 </a></li>
                        </ul>
                    </li>
                </ul>
                <!-- /.nav-list -->
                <div class="sidebar-collapse" id="sidebar-collapse">
                    <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right">
                    </i>
                </div>
                <script type="text/javascript">
                    try { ace.settings.check('sidebar', 'collapsed') } catch (e) { }
                </script>
            </div>
            <div class="main-content">
                <div class="breadcrumbs" id="breadcrumbs">
                    <script type="text/javascript">
                        try { ace.settings.check('breadcrumbs', 'fixed') } catch (e) { }
                    </script>
                    <ul class="breadcrumb">
                        <li><i class="icon-home home-icon"></i><a href="#">Home</a> </li>
                        <li><a href="#">Tables</a> </li>
                        <li class="active">jqGrid plugin</li>
                    </ul>
                    <!-- .breadcrumb -->
                    <div class="nav-search" id="nav-search">
                        <form class="form-search">
                        <span class="input-icon">
                            <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input"
                                autocomplete="off" />
                            <i class="icon-search nav-search-icon"></i></span>
                        </form>
                    </div>
                    <!-- #nav-search -->
                </div>
                <div class="page-content">
                    <div class="page-header">
                        <h1>
                            jqGrid <small><i class="icon-double-angle-right"></i>Dynamic tables and grids using
                                jqGrid plugin </small>
                        </h1>
                    </div>
                    <!-- /.page-header -->
                    <div class="row">
                        <div class="col-xs-12">
                            <!-- PAGE CONTENT BEGINS -->
                            <div class="alert alert-info">
                                <i class="icon-hand-right"></i>Please note that demo server is not configured to
                                save the changes, therefore you may get an error message.
                                <button class="close" data-dismiss="alert">
                                    <i class="icon-remove"></i>
                                </button>
                            </div>
                            <table id="grid-table">
                            </table>
                            <div id="grid-pager">
                            </div>
                            <script type="text/javascript">
                                var $path_base = "/"; //this will be used in gritter alerts containing images
                            </script>
                            <!-- PAGE CONTENT ENDS -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.page-content -->
            </div>
            <!-- /.main-content -->
            <div class="ace-settings-container" id="ace-settings-container">
                <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
                    <i class="icon-cog bigger-150"></i>
                </div>
                <div class="ace-settings-box" id="ace-settings-box">
                    <div>
                        <div class="pull-left">
                            <select id="skin-colorpicker" class="hide">
                                <option data-skin="default" value="#438EB9">#438EB9</option>
                                <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                                <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                                <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                            </select>
                        </div>
                        <span>&nbsp; Choose Skin</span>
                    </div>
                    <div>
                        <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
                        <label class="lbl" for="ace-settings-navbar">
                            Fixed Navbar</label>
                    </div>
                    <div>
                        <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
                        <label class="lbl" for="ace-settings-sidebar">
                            Fixed Sidebar</label>
                    </div>
                    <div>
                        <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
                        <label class="lbl" for="ace-settings-breadcrumbs">
                            Fixed Breadcrumbs</label>
                    </div>
                    <div>
                        <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
                        <label class="lbl" for="ace-settings-rtl">
                            Right To Left (rtl)</label>
                    </div>
                    <div>
                        <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
                        <label class="lbl" for="ace-settings-add-container">
                            Inside <b>.container</b>
                        </label>
                    </div>
                </div>
            </div>
            <!-- /#ace-settings-container -->
        </div>
        <!-- /.main-container-inner -->
        <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"><i class="icon-double-angle-up icon-only bigger-110">
        </i></a>
    </div>
    <!-- /.main-container -->
    <!-- basic scripts -->
    <!--[if !IE]> -->
    <script src="assets/js/jquery-2.0.3.min.js" type="text/javascript"></script>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>-->
    <!-- <![endif]-->
    <!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<![endif]-->
    <!--[if !IE]> -->
    <script type="text/javascript">
        window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>" + "<" + "/script>");
    </script>
    <!-- <![endif]-->
    <!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
    <script type="text/javascript">
        if ("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
    </script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/typeahead-bs2.min.js"></script>
    <!-- page specific plugin scripts -->
    <script src="assets/js/date-time/bootstrap-datepicker.min.js"></script>
    <script src="assets/js/jqGrid/jquery.jqGrid.min.js"></script>
    <script src="assets/js/jqGrid/i18n/grid.locale-en.js"></script>
    <!-- ace scripts -->
    <script src="assets/js/ace-elements.min.js"></script>
    <script src="assets/js/ace.min.js"></script>
    <!-- inline scripts related to this page -->
    <script type="text/javascript">
			var grid_data = 
			[ 
				{id:"1",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
				{id:"2",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
				{id:"3",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
				{id:"4",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
				{id:"5",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
				{id:"6",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
				{id:"7",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX",sdate:"2007-12-03"},
				{id:"8",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
				{id:"9",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
				{id:"10",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
				{id:"11",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
				{id:"12",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
				{id:"13",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
				{id:"14",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
				{id:"15",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
				{id:"16",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX",sdate:"2007-12-03"},
				{id:"17",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
				{id:"18",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
				{id:"19",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
				{id:"20",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
				{id:"21",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
				{id:"22",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
				{id:"23",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"}
			];	
			
			jQuery(function($) {
				var grid_selector = "#grid-table";
				var pager_selector = "#grid-pager";
			
				jQuery(grid_selector).jqGrid({
					//direction: "rtl",
					
					data: grid_data,
					datatype: "local",
					height: 250,
					colNames:[' ', 'ID','Last Sales','Name', 'Stock', 'Ship via','Notes'],
					colModel:[
						{name:'id',index:'id', width:60, sorttype:"int", editable: true},
						{name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",unformat: pickDate},
						{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
						{name:'stock',index:'stock', width:70, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"},unformat: aceSwitch},
						{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
						{name:'note',index:'note', width:150, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}},
                        	{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
							formatter:'actions', 
							formatoptions:{ 
								keys:true,
								delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
								editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
							}
						} 
					], 
			        
                    rownumbers: false,
					viewrecords : true,
					rowNum:10,
					rowList:[10,20,30],
					pager : pager_selector,
					altRows: true,
					//toppager: true,
					
					multiselect: true,
					//multikey: "ctrlKey",
			        multiboxonly: true,
			
					loadComplete : function() {
						var table = this;
						setTimeout(function(){
							styleCheckbox(table);
							
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					},
			
					editurl: $path_base+"/dummy.html",//nothing is saved
					caption: "jqGrid with inline editing",
			
			
					autowidth: true
			
				});
			
				//enable search/filter toolbar
				//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
			
				//switch element when editing inline
				function aceSwitch( cellvalue, options, cell ) {
					setTimeout(function(){
						$(cell) .find('input[type=checkbox]')
								.wrap('<label class="inline" />')
							.addClass('ace ace-switch ace-switch-5')
							.after('<span class="lbl"></span>');
					}, 0);
				}
				//enable datepicker
				function pickDate( cellvalue, options, cell ) {
					setTimeout(function(){
						$(cell) .find('input[type=text]')
								.datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
					}, 0);
				}
			
			
				//navButtons
				jQuery(grid_selector).jqGrid('navGrid',pager_selector,
					{ 	//navbar options
						edit: true,
						editicon : 'icon-pencil blue',
						add: true,
						addicon : 'icon-plus-sign purple',
						del: true,
						delicon : 'icon-trash red',
						search: true,
						searchicon : 'icon-search orange',
						refresh: true,
						refreshicon : 'icon-refresh green',
						view: true,
						viewicon : 'icon-zoom-in grey',
					},
					{
						//edit record form
						//closeAfterEdit: true,
						recreateForm: true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_edit_form(form);
						}
					},
					{
						//new record form
						closeAfterAdd: true,
						recreateForm: true,
						viewPagerButtons: false,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_edit_form(form);
						}
					},
					{
						//delete record form
						recreateForm: true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							if(form.data('styled')) return false;
							
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_delete_form(form);
							
							form.data('styled', true);
						},
						onClick : function(e) {
							alert(1);
						}
					},
					{
						//search form
						recreateForm: true,
						afterShowSearch: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
							style_search_form(form);
						},
						afterRedraw: function(){
							style_search_filters($(this));
						}
						,
						multipleSearch: true,
						/**
						multipleGroup:true,
						showQuery: true
						*/
					},
					{
						//view record form
						recreateForm: true,
						beforeShowForm: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
						}
					}
				)
			
			
				
				function style_edit_form(form) {
					//enable datepicker on "sdate" field and switches for "stock" field
					form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
						.end().find('input[name=stock]')
							  .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
			
					//update buttons classes
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
					buttons.eq(1).prepend('<i class="icon-remove"></i>')
					
					buttons = form.next().find('.navButton a');
					buttons.find('.ui-icon').remove();
					buttons.eq(0).append('<i class="icon-chevron-left"></i>');
					buttons.eq(1).append('<i class="icon-chevron-right"></i>');		
				}
			
				function style_delete_form(form) {
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
					buttons.eq(1).prepend('<i class="icon-remove"></i>')
				}
				
				function style_search_filters(form) {
					form.find('.delete-rule').val('X');
					form.find('.add-rule').addClass('btn btn-xs btn-primary');
					form.find('.add-group').addClass('btn btn-xs btn-success');
					form.find('.delete-group').addClass('btn btn-xs btn-danger');
				}
				function style_search_form(form) {
					var dialog = form.closest('.ui-jqdialog');
					var buttons = dialog.find('.EditTable')
					buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
					buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
					buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
				}
				
				function beforeDeleteCallback(e) {
					var form = $(e[0]);
					if(form.data('styled')) return false;
					
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_delete_form(form);
					
					form.data('styled', true);
				}
				
				function beforeEditCallback(e) {
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_edit_form(form);
				}
			
			
			
				//it causes some flicker when reloading or navigating grid
				//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
				//or go back to default browser checkbox styles for the grid
				function styleCheckbox(table) {
				/**
					$(table).find('input:checkbox').addClass('ace')
					.wrap('<label />')
					.after('<span class="lbl align-top" />')
			
			
					$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
					.find('input.cbox[type=checkbox]').addClass('ace')
					.wrap('<label />').after('<span class="lbl align-top" />');
				*/
				}
				
			
				//unlike navButtons icons, action icons in rows seem to be hard-coded
				//you can change them like this in here if you want
				function updateActionIcons(table) {
					/**
					var replacement = 
					{
						'ui-icon-pencil' : 'icon-pencil blue',
						'ui-icon-trash' : 'icon-trash red',
						'ui-icon-disk' : 'icon-ok green',
						'ui-icon-cancel' : 'icon-remove red'
					};
					$(table).find('.ui-pg-div span.ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
					*/
				}
				
				//replace icons with FontAwesome icons like above
				function updatePagerIcons(table) {
					var replacement = 
					{
						'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
						'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
						'ui-icon-seek-next' : 'icon-angle-right bigger-140',
						'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
					};
					$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
				}
			
				function enableTooltips(table) {
					$('.navtable .ui-pg-button').tooltip({container:'body'});
					$(table).find('.ui-pg-div').tooltip({container:'body'});
				}
			
				//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
			
			
			});
    </script>
</body>
</html>
